@import '@/style/basics.scss';

.image-upload-view{
  width: 220px;
  box-sizing: border-box;
  padding: $block-y $block-x;
  display: grid;
  justify-content: center;
  justify-items: center;


  .image-view{
    width: 200px;
    height: 150px;

    .no-image{
      width: 100%;
      height: 100%;
      background: url("@CRM/assets/img/img_default.png");
      filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
      -moz-background-size:100% 100%;
      background-size:100% 100%;
    }
    :deep(.avatar-uploader){
      width: 100%;
      height: 100%;
      .el-upload {
        width: 100%;
        height: 100%;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

      }
    }

    .img-container{
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn-view{
        width: 100%;
        height: 100%;
        display: none;
        position: absolute;
        top:0;
        left: 0;
        background-color: rgba(255,255,255,0.7);
        align-items: center;
        justify-content: center;
      }
    }

    .el-upload:hover{
      .btn-view{
        display: flex;
      }
    }
    img{
      width: 100%;
      height: 100%;
    }
  }



  .item-info{
    width: 100%;
    .file-name{
      margin-top: $block-y;
      text-align: center;
      font-size: $font-size-main;
      color: $font-color-main;
      line-height: 26px;
      .is-need{
        color: red;
      }

    }
    .el-form-container{
      margin-top: $block-y;
    }
    :deep(.el-form){
      .el-form-item{
        .el-form-item__content{
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
      .el-input__prefix,.el-input__suffix{
        display: flex;
        justify-content: center;
        align-items: center;
        .el-input__suffix-inner{
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .el-checkbox{
        margin-left: 10px;
      }
    }
  }
}
